<template>
  <div>

    <van-nav-bar
        title="特价拼团"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <img :src="specialOne.img" style="width: 100%; height: auto; "/>
    <div style="width: 100%; height: 60px; background-color: #ff5900; margin-top: -35px; color: white; ">
      <span>
        <span style="float: left; margin-left: 10px; margin-top: 10px; font-size: 12px;">￥</span>
        <span style="font-size: 25px; margin-top: 6px;">{{ specialOne.price }}</span> </span>
      <van-button plain type="primary"
                  style="background-color: #ff5900; height: 20px; width: 70px; margin-top: 10px; margin-left: 10px;  border-color: white; color: white; ">
        2人团
      </van-button>
      <br>
      <span style="float: left; margin-left: -40px; margin-top: 10px; font-size: 12px;">原价：￥{{
          specialOne.yuanjia
        }}|已拼：{{ specialOne.yipin }}</span>
    </div>
    <van-card
        :desc="specialOne.jieshao"
        :title="specialOne.name"
    />
    <van-cell is-link title="服务 极速退款  七天退换  正品保障" @click=""/>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="首页" color="#ee0a24" @click="shouye"/>
      <van-goods-action-icon icon="share-o" text="分享" @click="showShare = true"/>
      <van-goods-action-button type="warning" text="单独购买" @click="zhifu()" />
      <van-goods-action-button type="danger" text="我要开团" @click="zhifu()"/>
    </van-goods-action>
    <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      showShare: false,
      options: [
        {name: '微信', icon: 'wechat'},
        {name: '微博', icon: 'weibo'},
        {name: '复制链接', icon: 'link'},
        {name: '分享海报', icon: 'poster'},
        {name: '二维码', icon: 'qrcode'},
      ],
      specialOne: {},
      id: null,
    }
  },
  methods: {
    zhifu() {
      const min = 100000000;
      const max = 999999999;
      var trade = Math.floor(Math.random() * (max - min + 1)) + min.toString();
      console.log(trade)
      this.$router.push({path: '/Wxprice', query: { trade: trade}})
    },
    shouye() {
      this.$router.push('/shouye')
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    findSpecialOne() {
      this.axios.get(`http://1.94.221.254:9999/api/qcfw-home/home/special/findSpecialOne/${this.id}`).then(res => {
        this.images = res.data.data.img
        this.specialOne = res.data.data
        console.log(res.data.data)
        console.log(this.specialOne)
        console.log(this.images)
      })
    },
    onClickLeft() {
      this.$router.go(-1)
    }
  },
  created() {
    this.id = this.$route.query.id
    console.log(this.id)
    this.findSpecialOne()
    var token = localStorage.getItem('token');
    if (token === null) {
      this.$router.push('/');
    }
  }
}
</script>

<style scoped>

.van-card__title {
  font-size: 18px;
  height: 40px;
  margin-top: 10px;
}

.van-card__desc {
  font-size: 14px;
  color: #f3d308;
}
</style>